Apache Cordova is used for creating hybrid mobile apps, so you need to consider this before you choose it for your project.

Mobile applications are becoming popular everywhere, from smartphones and tablets, to smart watches, and soon be found in other gadgets, too. However, developing for each separate mobile platform can be a boring task, especially if your resources are limited, or if you are a single developer. Then, becoming a well-experienced Apache Cordova developer can come in handy by providing a way to develop mobile applications using available standard web technologies - HTML5, CSS3 and JavaScript.

Below are the best practices for Cordova apps development.

Single Page Apps

The recommended design for all Cordova apps is Single Page Design. SPA is using client side router and navigation loaded on the single page (usually index.html). The routing is handled through AJAX. If you have followed our all posts on Cordova, you have possibly noticed that before every Cordova plugin can be used it needs to wait until device is ready. SPA design will improve the loading speed and overall performance of the app.

Touch Events

Since Cordova is used for mobile world it is natural to use touchstart and touchend events instead of click events. The click events have a delay of 300ms, so the clicks doesn't feel soothing. On the other hand, touch events aren't supported on every platform. You should keep this into mind before you decide what to use.

Animations

You shouldn’t use JavaScript animations and always prefer hardware accelerated CSS Transitions instead as they will perform better and give users a good experience on mobile devices.

Storage

Use storage caching as much as possible. As Mobile network connections are generally bad, so you should be able to minimize network calls inside your app. You should also be able handle offline status of the app, as there will be times when user's devices are offline.

Scrolling

Almost all the time the scrolling lists can be a slow part inside your app. There are two ways to improve scrolling performance of the app. Use loaders where and when necessary, but we recommend to use native scrolling. Also, you should load them partially, when there are lots of items in the list.

Images

Images can also make the mobile app slow. You should use CSS image sprites whenever possible. You should try to make the images fit perfectly instead of scaling it.

CSS styles

The shadows, gradients slow the rendering time of the page, so you must avoid to use them.

Simplification

You must try to minimize number of DOM elements and DOM manipulation as Browser's DOM is slow.

Testing

Make sure your app is tested always on as many devices and operating system versions as possible. If app works flawlessly on one device, it doesn't necessarily mean that it will work same on some other device or platform.

Also Read:Cordova – Using Compass for Device Orientation

Cordova- Using Contacts in Your App

Handling Events in App Built Using Apache Cordova